@import "normalize";
@import "base";
@import "variable";

// 字体设置
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
}
// 字体大小设置
.font_dpr(@font-size: 16px) {
  font-size: @font-size;

  [data-dpr= "2"] & {
    font-size: @font-size * 2;
  }
  [data-dpr= "3"] & {
    font-size: @font-size * 3;
  }
}

.header {
  background-color: #f4483e;
  border-bottom: 2rem/@base solid #f33e33;

  .back img {
    margin-top: 30rem/@base;
  }
  .title {
    overflow: hidden;
    height: 96rem/@base;
    line-height: 96rem/@base;
    color: #fff;
    .font_dpr(16px);
    text-align: center;
  }
}
.main {
  .coupon-nav {
    padding-bottom: 5rem/@base;
    width: 100%;
    .nav-wrap {
      overflow: hidden;
      height: 75rem/@base;
      border-right: 3rem/@base solid #ccc;

      li {
        float: left;
        height: 73rem/@base;
        margin: 0 25rem/@base;
        line-height: 73rem/@base;
        .font_dpr(14px);
        color: #000;
        cursor: pointer;
        &.current {
          border-bottom: 3rem/@base solid #f4483e;
          color: #f4483e;
        }
      }
    }
    .search {
      float: right;
      width: 75rem/@base;
      height: 75rem/@base;
      padding: 0;
      margin: 0;
      img {
        width: 50rem/@base;
        height: 50rem/@base;
        margin: 12rem/@base auto 0;
      }
    }
  }
  .product-item {
    border-top: 8rem/@base solid #f8f8f8;
    position: relative;
    padding: 20rem/@base 10rem/@base;
    height: 300rem/@base;
    .img-box {
      float: left;
      width: 260rem/@base;
      height: 260rem/@base;
    }
    img  {
      width: 260rem/@base;
      height: 260rem/@base;
    }
    .info {
      overflow: hidden;
      padding-left: 20rem/@base;
    }
    .title {
      line-height: 40rem/@base;
      color: #000;
      font-weight: 700;
      .font_dpr(16px);
    }
    .price {
      line-height: 70rem/@base;
      .font_dpr(16px);
      color: #fc376f;
      del {
        color: #d2c2b4;
        margin-left : 20rem/@base;
      }
    }
    .bar {
      i {
        float: left;
        width: 165rem/@base;
        height: 30rem/@base;
        border: 3rem/@base solid #fd5b5e;
        color: #fff;
        border-radius: 5rem/@base;
        background-color: #ffb7b7;
        text-align: center;
        em {
          float: left;
          height: 100%;
          background-color: #fc353a;
        }
      }
      b {
        float: left;
        margin-left: 24rem/@base;
        color: #fd6e71;
      }
    }
    .link {
      margin-top: 20rem/@base;
    }
    .link .fl {
      width: 210rem/@base;
      height: 48rem/@base;
      border: 3rem/@base dashed #ec7174;
      line-height: 48rem/@base;
      text-align: center;
      a {
        display: block;
        color: #ec7174;
      }
    }
    .link .fr {
      width: 115rem/@base;
      height: 54rem/@base;
      text-align: center;
      line-height: 54rem/@base;
      background-color: #ff5e5d;
      a {
        color: #fff;
        display: block;
      }
    }
  }
  .click {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 300rem/@base;
    a {
      display: block;
      width: 100%;
      height: 300rem/@base;
    }
  }
}
.backTop {
  position: fixed;
  right: 10%;
  bottom: 10%;
  width: 60rem/@base;
  height: 60rem/@base;
  border-radius: 50%;
  opacity: .5;
  img {
    width: 60rem/@base;
    height: 60rem/@base;
  }
}